<template>
  <div class="mine-page">
    <!-- 头部导航栏 -->
    <van-nav-bar fixed placeholder>
      <template #right>
        <van-icon name="ellipsis" size="18" @click="showMenu" />
      </template>
    </van-nav-bar>

    <!-- 用户信息区域 -->
    <div class="user-info-section">
      <div class="user-header">
        <div class="avatar-wrapper">
          <van-image round :src="avatar" width="60" height="60" />
        </div>
        <div class="user-details">
          <div class="phone">{{ props.nickName }}</div>
          <!-- <div class="status">待解锁</div> -->
        </div>
        <div class="settings">
          <van-icon name="edit" size="20" @click="editProfile" />
        </div>
      </div>

      <!-- 卡券区域 -->
      <!-- <div class="cards-section">
        <van-grid :column-num="3" :border="false">
          <van-grid-item>
            <div class="card-item">
              <div class="card-icon">
                <van-icon name="crown" color="#ff4d4f" size="24" />
              </div>
              <div class="card-text">
                <div class="title">超级吃货卡</div>
                <div class="subtitle">4张红包可用</div>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="card-item">
              <div class="card-icon">
                <van-icon name="coin" color="#ff4d4f" size="24" />
              </div>
              <div class="card-text">
                <div class="title">吃货豆</div>
                <div class="subtitle">0豆可用</div>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="card-item">
              <div class="card-icon">
                <van-icon name="coupon" color="#ff4d4f" size="24" />
              </div>
              <div class="card-text">
                <div class="title">红包卡券</div>
                <div class="subtitle">9张红包可用</div>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div> -->

      <!-- 我的订单 -->
      <div class="section">
        <div class="section-header">
          <h3 class="section-title">我的订单</h3>
        </div>
        <van-grid :column-num="4" :border="false">
          <van-grid-item icon="notes" text="全部" @click="goToOrders('all')" />
          <van-grid-item icon="clock" text="待收货/使用" @click="goToOrders('pending')" />
          <van-grid-item icon="comment" text="待评价" @click="goToOrders('review')" />
          <van-grid-item icon="gold-coin" text="退款" @click="goToOrders('refund')" />
        </van-grid>
      </div>

      <!-- 更多功能 -->
      <div class="section">
        <div class="section-header">
          <h3 class="section-title">更多功能</h3>
        </div>
        <van-grid :column-num="4" :border="false">
          <van-grid-item icon="location" text="我的地址" @click="goToAddress" />
          <van-grid-item icon="service" text="我的客服" @click="goToService" />
          <van-grid-item icon="gift" text="下单返" @click="goToRewards" />
          <van-grid-item icon="search" text="浏览记录" @click="goToHistory" />
        </van-grid>
      </div>

    </div>

    <!-- 菜单弹窗 -->
    <van-action-sheet v-model:show="showMenuSheet" :actions="menuActions" @select="onSelectMenu" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router';

export default defineComponent({
  name: 'HomePage'
})
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showConfirmDialog, showToast } from 'vant'
import type { UserInfo } from '@/models/main'

const props = withDefaults(defineProps<UserInfo>(), {
  userId: '',
  nickName: '',
  email: '',
  phone: '',
  token: '',
  sex: '',
  areaName: '',
  areaCode: '',
  birthday: ''
})

const avatar = ref('')

// 控制弹窗显示
const showMenuSheet = ref(false)

// 菜单选项
const menuActions = [
  { name: '个人资料', value: 'profile' },
  { name: '账户安全', value: 'security' },
  { name: '退出登录', value: 'logout' }
]

// 显示菜单
const showMenu = () => {
  showMenuSheet.value = true
}

// 菜单选择
const onSelectMenu = (action: any) => {
  switch (action.value) {
    case 'profile':
      editProfile()
      break
    case 'security':
      showToast('跳转到账户安全')
      break
    case 'logout':
      showConfirmDialog({
        title: '确认退出',
        message: '确定要退出当前账户吗？'
      }).then(() => {
        showToast('已退出登录')
      }).catch(() => {
        // 取消操作
      })
      break
  }
}

const goToOrders = (type: string) => {
  showToast('跳转到订单' + type)
}

// 编辑个人资料
const editProfile = () => {
  router.push({
    name: 'edit'
  })
}

// 跳转到地址
const goToAddress = () => {
  showToast('跳转到地址管理')
}

// 跳转到客服
const goToService = () => {
  showToast('跳转到客服')
}

// 跳转到奖励
const goToRewards = () => {
  showToast('跳转到下单返奖')
}

// 跳转到历史
const goToHistory = () => {
  showToast('跳转到浏览记录')
}

const checkImageByLoad = (url: string): Promise<boolean> => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = url;
  });
};

onMounted(async () => {
  const imgUrl = "https://krics-tuanduo.oss-cn-hangzhou.aliyuncs.com/" + props.userId + ".jpeg";
  const isValid = await checkImageByLoad(imgUrl);
  if (isValid) {
    avatar.value = imgUrl;
  } else {
    avatar.value = "https://krics-tuanduo.oss-cn-hangzhou.aliyuncs.com/c5c5f62d-7d01-47de-a78d-2d8a4be465f4.jpeg";
  }

});
</script>

<style scoped>
/* 禁用滚动条的样式 */
.mine-page::-webkit-scrollbar {
  display: none;
}

.mine-page {
  background-color: #f5f5f5;
  min-height: 85vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: hidden;
}

.user-info-section {
  /* background-color: white; */
  border-radius: 12px;
  margin: 12px 0px;
  overflow: hidden;
}

.user-header {
  display: flex;
  align-items: center;
  margin: 12px 16px;
  padding: 10px;
  border-radius: 12px;
  background: white;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.avatar-wrapper {
  margin-right: 16px;
}

.user-details {
  flex: 1;
}

.phone {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.status {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.settings {
  margin-left: auto;
}

.banner {
  padding: 16px 20px;
  background-color: #1a1a1a;
  color: white;
  border-radius: 0 0 12px 12px;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #1a1a1a;
  border-radius: 8px;
}

.icon-wrapper {
  margin-right: 12px;
}

.text {
  flex: 1;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.subtitle {
  font-size: 12px;
  opacity: 0.8;
}

.cards-section {
  margin: 12px 16px;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
}

.card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8f8f8;
  margin-bottom: 12px;
}

.card-icon {
  margin-bottom: 8px;
}

.card-text {
  text-align: center;
}

.title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.subtitle {
  font-size: 12px;
  color: #999;
}

.section {
  margin: 12px 16px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}

.section-header {
  /* padding: 16px 20px; */
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.count {
  font-size: 12px;
  color: #999;
}

.wallet-items {
  display: flex;
  padding: 16px 20px;
  gap: 16px;
}

.wallet-item {
  flex: 1;
  text-align: center;
}

.amount {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.badge {
  font-size: 10px;
  color: white;
  background-color: #ff4d4f;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.follow-items {
  display: flex;
  padding: 16px 20px;
  gap: 16px;
}

.follow-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8f8f8;
}

.store-logo {
  margin-right: 12px;
}

.store-info {
  flex: 1;
}

.name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.time {
  font-size: 12px;
  color: #999;
}

.enter-btn {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

:deep(.van-grid-item__content) {
  padding: 16px 8px;
}

:deep(.van-grid-item__text) {
  font-size: 12px;
  margin-top: 4px;
}

:deep(.van-button--small) {
  padding: 4px 8px;
  font-size: 12px;
}
</style>